<template>
    <div style="background-color: #66ccff;">
        <h1>slot插槽</h1>
        <SomSlot></SomSlot>
        <h3>插槽用于决定父组件将所携带额数据内容，插入子组件指定的某个位置，
            从而使模块分块，具有模块化的特质和更大的重用性</h3>
        <h2>1.默认插槽</h2>
        <h3>默认插槽是在组件模版中定义的，它允许父组件将内容传递给子组件
            使用方法，在子组件模版中使用特殊的slot标签，就可以为子组件开启一个插槽
            然后在父组件中，将需要传递的内容放在子组件标签即可
        </h3>
        <h3>
            插入在子组件标签里面的内容，将替换子组件slot标签以及它的内容
        </h3>
        <SomSlot>
            <template v-slot:default>
                <div>
                    我是父组件放在子组件里的内容
                    <el-button type="danger">危险按钮</el-button>
               </div>
            </template>
        </SomSlot>
        <h2>2.具名插槽</h2>
        <h3>v-slot指令将内容定向到指定名字的插槽，v-slot简写为#</h3>
        <SomSlot>
            <template v-slot:btn>
                <div>
                    <span style="background-color: aquamarine;">牢大</span>
                 </div>
            </template>
            <template #msg>
                <div style="background-color:chartreuse;">
                    <span>man~!</span>
                </div>
            </template>
        </SomSlot>
        <h2>3.作用域插槽</h2>
        <h3>在封装组件时，为预留的slot提供对应属性值，这种的方法叫做作用域插槽</h3>
        <SomSlot>
            <template v-slot:default>
                <div>
                    商品展示
                </div>
            </template>
            <template #btn>
                <div>
                    商品简介
                </div>
            </template>
            <template #msg>
                <div>
                    商品名称
                </div>
            </template>
            <template #img="{scope}">
                <div>
                    <img :src="scope" alt="">
                </div>
            </template>
        </SomSlot>
    </div>
</template>


<script>
import SomSlot from '@/components/SomSlot.vue'


export default {
    components:{
        SomSlot
    }
}
</script>